<template>
  <div>
    <div class="container">
      <el-form ref="query" :model="query" :inline="true" size="mini">
        <el-form-item label="分类名称：" prop="categoryId">
          <el-select
              v-model="query.categoryId"
              placeholder="请填写分类名称"
              v-if="categoryList !== undefined && categoryList.length > 0"
              class="handle-select mr10"
              clearable
              filterable
          >
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="name">
          <el-input
              v-model="query.name"
              placeholder="请填写名称"
              clearable
          ></el-input>
        </el-form-item>

        <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
        >搜索
        </el-button>
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-delete"
            @click="handleClear"
        >清空
        </el-button>
      </el-form>

      <div class="handle-box">
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            class="handle-del mr10"
            @click="handleEdit()"
            v-if="$perm.hasPerm('button_flowModel_add')"
        >添加
        </el-button>
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-delete"
            class="handle-del mr10"
            @click="delAllSelection()"
            v-if="$perm.hasPerm('button_flowModel_batchDelete')"
        >批量删除
        </el-button>
      </div>

      <el-table
          :data="records"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
            align="center"
        ></el-table-column>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="版本" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.modelVersion > 0">
              V{{ scope.row.modelVersion }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="分类名称"></el-table-column>
        <el-table-column label="表单类型" align="center">
          <template #default="scope">
            <el-tag>{{ $enum.getMapValue("flowFormType", scope.row.formType).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag>{{ $enum.getMapValue("flowModelStatus", scope.row.status).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否内置" align="center">
          <template #default="scope">
            <el-tag
                :type="
                scope.row.buildInFlag === true
                  ? 'success'
                  : scope.row.buildInFlag === false
                  ? 'danger'
                  : 'info'
              "
            >{{ $enum.getMapValue("yesNo", scope.row.buildInFlag).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间"></el-table-column>
        <el-table-column prop="modifiedTime" label="更新时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row.id)"
                v-if="$perm.hasPerm('button_flowModel_edit') && (scope.row.status === 'DISABLED' || scope.row.status === 'TO_BE_PUBLISHED')"
            >编辑
            </el-button>
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEditPublishedStatus(scope.row.id)"
            >
              {{ "发布" }}
            </el-button>
            <el-button
                v-if="scope.row.status === 'PUBLISHED'"
                type="text"
                icon="el-icon-edit"
                @click="handleEditDisabledStatus(scope.row.id)"
            >
              停用
            </el-button>
            <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                v-if="$perm.hasPerm('button_flowModel_batchDelete')"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <custom-page
            :current="query.current"
            :size="query.size"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  flowModelEditStatusApi,
  flowModelPageApi,
  flowModelRemoveApi,
} from "../../api/flow/flowModel";
import {flowCategoryListEnabledApi} from "@/api/flow/flowCategory";

export default {
  data() {
    return {
      query: {
        current: 1,
        size: 10,
        categoryId: null,
        name: null,
      },
      records: [],
      multipleSelection: [],
      delList: [],
      categoryList: [],
      total: 0,
    };
  },
  created() {
    this.getFlowCategoryList();
    this.getData();
  },
  methods: {
    getFlowCategoryList() {
      flowCategoryListEnabledApi().then((res) => {
        this.categoryList = res.bizData;
      });
    },
    // 获取数据
    getData() {
      flowModelPageApi(this.query).then((res) => {
        this.records = res?.bizData?.records;
        this.total = res?.bizData?.total;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.query.current = 1;
      this.getData();
    },
    // 清空
    handleClear() {
      if (this.$refs.query != undefined) {
        this.$refs.query.resetFields();
        this.getData();
      }
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        flowModelRemoveApi({ids: row.id}).then((res) => {
          this.getData();
        });
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      if (length < 1) {
        this.$message.error("请选择数据");
        return;
      }
      this.multipleSelection.filter((item) => {
        this.delList.push(item.id);
      });
      const ids = this.delList.join(",");
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        flowModelRemoveApi({ids: ids}).then((res) => {
          if (res) {
            this.$message.success("删除成功");
            this.getData();
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    },
    // 编辑操作
    handleEdit(id) {
      this.$router.goPage({
        path: "/flow/model/operate",
        query: {
          id,
        },
      });
    },
    // 发布
    handleEditPublishedStatus(id) {
      let tip = "确定要发布吗？";
      let statusVal = "PUBLISHED";
      this.$confirm(tip, "提示", {
        type: "warning",
      }).then(() => {
        flowModelEditStatusApi({id: id, status: statusVal}).then((res) => {
          this.getData();
        });
      });
    },
    // 停用
    handleEditDisabledStatus(id) {
      let tip = "确定要停用吗？";
      let statusVal = "DISABLED";
      this.$confirm(tip, "提示", {
        type: "warning",
      }).then(() => {
        flowModelEditStatusApi({id: id, status: statusVal}).then((res) => {
          this.getData();
        });
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.query.current = val;
      this.getData();
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
